<template>
	<view>
		<section>
			<div class="model">
				<h3>第一步：关注公众号</h3>
				<p>保存二维码，在微信中扫描该二维码，然后关注。或直接搜索公众号账号“<span>哩咔</span>”</p>

			</div>
			<div class="img">
				<img id="imgTest" :src="$BASE_URL+'/st/mini/static/img/mine/qr_code.png'" />
			
			</div>
			<div class="model">
				<h3>第二步：回复“验证账户”，并点击验证链接</h3>
				<p>关注成功，在公众号回复“验证账户”，并点击打开回复的验证链接。</p>
			</div>
			<div class="model">
				<h3>第三步：验证账户</h3>
				<p>在打开【验证账户】页面中回复以下字符，点击验证账户。</p>
			</div>
			<div class="check">
				<h3 class="checkTitle">校验码</h3>
				<div class="checkNum"><span class="num" id="num">{{wxCode}}</span><span id="copy" class="copy"
						@click="copy(wxCode)">复制</span></div>
			</div>
		</section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				$BASE_URL:this.$BASE_URL,
				userId: '',
				wxCode: ''
			}
		},
		mounted() {

		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					that.userId = res.data.userId
					that.getWxCode()
				}
			});
		},
		methods: {
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: function() {
						//重点~做笔记
						//在success中加入uni.hideToast()可以解决
						uni.showToast({
							title: '复制成功',
							duration: 2000,
							icon: 'none'
						});
						//以下就可自定义操作了~
					},
					fail: function(err) {
						uni.showToast({
							title: '复制失败',
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},
			getWxCode() {
				var data = {
					url: '/wechat/getWxCode',
					methods: 'post',
					data: {
						'userId': this.userId,
						'appName': 'YBB'
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == '1') {
						this.wxCode = res.data.wxCode
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	section {
		width: 100%;
		background: #fff;
	}

	section .model {
		margin-left: 50upx;
	}

	section .model h3 {
		font-family: PingFangSC Medium[Bold];
		font-size: 30upx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 24upx;
	}

	section .model p {
		font-family: PingFangSC Regular;
		font-size: 28upx;
		letter-spacing: 3upx;
		color: #737373;
		margin-bottom: 24upx;
	}

	section .model p span {
		color: #EB114E;
	}

	.img {
		text-align: center;
	}

	.img img {
		width: 432upx;
		height: 490upx;
	}

	.check {
		text-align: center;
		margin-left: 50upx;

		margin-right: 50upx;
		margin-bottom: 50upx;
	}

	.check .checkTitle {
		font-family: PingFangSC Medium[Bold];
		font-size: 34upx;
		font-weight: bold;
		color: #333333;
		margin-top: 32upx;
		margin-bottom: 32upx;
	}

	.checkNum {
		background: #f2f2f2;
		height: 60upx;
		margin-bottom: 30upx;
		line-height: 60upx;
		font-size: 28upx;
	}

	.checkNum .num {
		width: 400upx;
		color: #737373;
		float: left;
		font-size: 26upx;
		font-weight: 200upx;
		margin-left: 10upx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}

	.checkNum .copy {
		color: #7ea6d3;
		float: right;
		margin-right: 10upx
	}
</style>
